<template>
  <section class="payment">
    <el-col :span="24" class="action-bar">
      <span class="task-form-text">缴费状态：</span>
      <el-select v-model="searchStatus" class="action-bar-input" >
        <el-option
          v-for="item in payStatusOptions"
          :key="item.value"
          :value="item.value"
          :label="item.label">
        </el-option>
      </el-select>
      <span class="task-form-text">缴费类型：</span>
      <el-select v-model="searchType" class="action-bar-input">
        <el-option
          v-for="item in searchTypeOptions"
          :key="item.value"
          :value="item.value"
          :label="item.label"
        >
        </el-option>
      </el-select>
      <span class="task-form-text">缴费项目：</span>
      <el-select v-model="searchItem" class="action-bar-input">
        <el-option
          v-for="item in searchItemOptions"
          :key="item.value"
          :value="item.value"
          :label="item.label"
        >
        </el-option>
      </el-select>
      <el-input v-model="searchMember" placeholder="请输入姓名或会员编号" style="width:200px"></el-input>
			<el-button type="primary" size="medium" style="margin-left:20px;" @click="getPaymentList">检索</el-button>
      <el-button type="primary" size="medium" @click="openImportExcel">导入</el-button>
      <!-- <el-button type="primary" size="medium" @click="newPayMent">新增</el-button> -->
    </el-col>
    <!--列表-->
		<el-table :data="users" highlight-current-row class="el-table-style">
			<el-table-column type="selection" width="55"/>
			<el-table-column type="index" width="60"/>
      <el-table-column prop="vip_card_number" label="会员编号" width="180"/>
			<el-table-column prop="realname" label="姓名" width="120"/>
			<el-table-column prop="vip_name" label="会员级别" width="100"/>
			<el-table-column prop="status" label="缴费状态" width="100">
        <template slot-scope="scope">

          <el-tag v-show="scope.row.status==0" type="warning">未缴费</el-tag>
          <el-tag v-show="scope.row.status==1" type="success">已缴清</el-tag>
          <el-tag v-show="scope.row.status==2" type="danger">未缴清</el-tag>
        </template>
      </el-table-column>
			<el-table-column prop="payment_time" label="缴费时间" width="190"/>
			<el-table-column prop="pay_channel_name" label="缴费渠道" width="100">
      </el-table-column>
      <el-table-column prop="amount_receivable" label="应缴金额" width="120"/>
      <!-- <el-table-column prop="amount_received" label="已收金额" width="120"/> -->
      <el-table-column prop="pay_type_name" label="支付方式" width="120"/>
      <el-table-column prop="end_time" label="会员到期时间" width="180"/>
      <el-table-column prop="payment_type" label="缴费类型" width="120">
      </el-table-column>
      <el-table-column prop="type_name" label="缴费项目" width="120"></el-table-column>
			<el-table-column label="操作" width="350">
				<template slot-scope="scope">
          <div>
            <el-button type="primary" size="mini" @click="editorPayment(scope.row.id,scope.row.vip_id)">编辑</el-button>
				    <el-button type="danger" v-show="scope.row.status==0" class="danger-btn" @click="call(scope.row.id,scope.row.vip_id)" size="mini">催缴</el-button>
            <el-button type="info" disabled v-show="scope.row.status==1" class="danger-btn" size="mini">催缴</el-button>
            <el-button type="primary" size="mini" @click="showPaymentDetail(scope.row.id,scope.row.vip_id)">查看详情</el-button>
            <el-button type="danger" size="mini" @click="deletePayment(scope.row.id)">删除</el-button>
          </div>
        </template>
			</el-table-column>
		</el-table>
		<el-col :span="24" class="footer-bar">
			<div class="page-code">
        <el-pagination
					background
					:page-size="16"
					layout="prev, pager, next"
					:total="totalPage"
					@current-change="pageChange"
						>
				</el-pagination>
      </div>
    </el-col>

    <!-- 弹出的编辑窗口 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="50%"
      height="50%"
      center
      class="editor-dialog"
      @close="initData"
      >
      <el-form :label-position="'left'" label-width="120px" :model="member" >
        <el-form-item label="姓名">
          <!-- <el-input v-model="member.name"></el-input> -->
          <el-select
          :disabled="editorFlag"
          v-model="member.name"
          filterable
          remote
          reserve-keyword
          placeholder="请输入会员名"
          @change="getVipNum"
          :remote-method="searchName"
          >
          <el-option
            v-for="(item,index) in vipList"
            :key="index"
            :label="item.realname"

            :value="item">
          </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="会员编号">
          <div>{{member.number}}</div>
        </el-form-item>
        <el-form-item label="会员级别">
          <div>{{member.level}}</div>
        </el-form-item>
        <el-form-item label="会员到期时间">
          <div class="block">
            <div>{{member.servingTime}}</div>
          </div>
        </el-form-item>
        <el-form-item label="缴费项目" v-if="editorFlag==false">
          <!-- <el-select v-model="member.payItem" class="action-bar-input" @change="payItemChange">
            <el-option
              v-for="item in payItemOptions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            >
            </el-option>
          </el-select> -->
          <div>会员缴费</div>
        </el-form-item>
        <el-form-item label="缴费项目" v-if="editorFlag==true">
          <div>{{member.payItemName}}</div>
        </el-form-item>
        <el-form-item label="缴费状态">
          <el-select v-model="member.captureState" placeholder="请选择">
            <el-option
              v-for="item in payStatusOptions2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
    >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="缴费时间">
          <div class="block">
              <el-date-picker
              v-model="member.captureTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="缴费渠道">
            <el-select v-model="member.captureType" placeholder="请选择">
              <el-option
                v-for="item in captureTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
				  </el-form-item>
        <!-- <el-form-item label="应缴金额">
          <el-input v-model="member.mustMoney" type="number"></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="已收金额">
          <el-input v-model="member.hasMoney" type="number"></el-input>
        </el-form-item> -->
        <el-form-item label="支付方式">
            <el-select v-model="member.payType" placeholder="请选择">
              <el-option
                v-for="item in payTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
				  </el-form-item>
        <el-form-item label="缴费类型" v-show="payModeFlag">
            <el-select v-model="member.payMode" placeholder="请选择" :disabled="editorFlag">
              <el-option
                v-for="item in payModeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
				  </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="getPaymentInsert" v-if="!editorFlag">新增</el-button>
        <el-button type="primary" @click="getPaymentUpdate" v-else>提交</el-button>
      </span>
    </el-dialog>
    <!-- 编辑框  end-->


    <el-dialog
      :visible.sync="detailVisible"
      width="50%"
      height="50%"
      center
      class="editor-dialog"
      @close="initData"
      >
      <el-form :label-position="'left'" label-width="120px" :model="member" >
        <el-form-item label="姓名">
          <div>{{memberInitData.realname}}</div>
        </el-form-item>
        <el-form-item label="会员编号">
          <div>{{memberInitData.vip_card_number}}</div>
        </el-form-item>
        <el-form-item label="会员级别">
          <div>{{memberInitData.vip_name}}</div>
        </el-form-item>
        <el-form-item label="会员到期时间">
          <div class="block">
            <div>{{memberInitData.end_time}}</div>
          </div>
        </el-form-item>
        <el-form-item label="缴费项目">
          <div>{{memberInitData.type_name}}</div>
        </el-form-item>
        <el-form-item label="缴费状态">
          <div>{{memberInitData.status_name}}</div>
        </el-form-item>
        <el-form-item label="缴费时间">
          <div>{{memberInitData.payment_time}}</div>
        </el-form-item>
        <el-form-item label="缴费渠道">
            <div>{{memberInitData.pay_channel_name}}</div>
				  </el-form-item>
        <el-form-item label="应缴金额">
          <div>{{memberInitData.amount_receivable}}</div>
        </el-form-item>
        <!-- <el-form-item label="已收金额">
          <div>{{memberInitData.hasMoney}}</div>
        </el-form-item> -->
        <el-form-item label="支付方式">
            <div>{{memberInitData.pay_type_name}}</div>
				  </el-form-item>
        <el-form-item label="缴费类型" >
            <div>{{memberInitData.payment_type}}</div>
				  </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 查看详情  end-->

    <!-- 打入Excel窗口 -->
    <el-dialog
      :visible.sync="importExcelFlag"
      width="30%"
      height="50%"
      center
      class="editor-dialog"
      :title="'导入'"
      @close="closeExcelDialog"
    >

      <el-upload
        style="display:inline;margin-left:10px;"
        action="https://tengxiansh.dindong.cn/api/file/upload-excel"
        accept=".xls,.xlsx"
        name="excel"
        :limit="100"
        :on-success="handleSuccess"
        :on-error="handleError">
        <el-button type="primary" size="medium">选择文件</el-button>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeExcelDialog">关闭</el-button>
      </span>
    </el-dialog>

  </section>
</template>

<script>
export default {
  // status
  // payMode1,2全款，分期
	data(){
		return {
      editorFlag:'',//区分新增还是编辑
			users:[],
      dialogVisible:false,//编辑状态的弹窗
      detailVisible:false,//查看详情弹窗
      searchStatus:'',//缴费状态
      searchType:'',//缴费类型
      searchItem:'',//缴费项目
      searchMember:'',//搜索的姓名和编号
      payStatusOptions:[
        {label:'全部',value:''},
        {label:'已缴费',value:1},
        {label:'未缴费',value:0},
      ],
      payStatusOptions2:[
        {label:'已缴费',value:1},
        {label:'未缴费',value:0},
      ],
      searchItemOptions:[
        {label:'全部',value:''},
        {label:'活动报名',value:'activity'},
        {label:'会员缴费',value:'vip'}
      ],
      payItemOptions:[//弹出框的缴费项目
        {label:'活动报名',value:'acitivity'},
        {label:'会员缴费',value:'vip'}
      ],
      searchTypeOptions:[{label:'全部',value:''},{label:'一次性',value:1},{label:'分期',value:2}],//缴费类型
      captureTypeOptions:[{label:'线上',value:0},{label:'线下',value:1}],//缴费渠道
      payTypeOptions:[{label:'支付宝',value:'ali'},{label:'微信',value:'wechat'},{label:'现金',value:'cash'},{label:'企业转账',value:'corporate_transfer'},{label:'其他',value:'other'}],//支付方式
      payModeOptions:[{label:'免费',value:0},{label:'一次性',value:1},{label:'分期',value:2}],//缴费类型
      member:{
        name:'',
        id:'',//会员id
        number:'',//会员编号
        vipId:'',
        level:'',//会员等级
        payItem:'',//缴费项目
        payItemName:'',//缴费项目名字
        captureState:'',//缴费状态
        servingTime:'',//会员到期时间
        mustMoney:'',//应缴金额
        captureTime:'',//缴费时间
        captureType:'',//缴费渠道
        payType:'',//支付方式
        payMode:'',//缴费类型
        hasMoney:'',//已交金额
      },//弹窗的信息
      memberInitData:'',//详情的所有数据
      payModeFlag:false,//能否选择缴费类型


      vipList:'',//搜索的vip用户
      page:1,
      totalPage:0,
      importExcelFlag: false
		}
  },
  methods: {
     call(id){
      //催缴
      this.$confirm('对该用户进行催缴?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          const res=await this.$api.callPayment({
            id
          })
          if(res.data.level=='success'){
              this.$message({
              type: 'success',
              message: res.data.message
            });
          }else{
            this.$message({
              type: 'error',
              message: res.data.message
            });
          }

        }).catch(() => {

        });
    },
    handleClose(){
      //编辑弹窗关闭前的回调

    },

    async getPaymentList(){
      //获取缴费记录
      const res=await this.$api.getPaymentList({
        page:this.page,
        pagesize:16,
        status:this.searchStatus,
        payMode:this.searchType,
        keyword:this.searchMember,//会员名或手机号
        payName:this.searchItem,//缴费项目
      })
      if(res.data.level=='success'){
        this.users=res.data.data.payment_list;
        this.totalPage=res.data.data.total
      }
    },
    pageChange(e){
			//翻页
			this.page=e;
			this.getPaymentList()
		},
    async searchName(name){
      //搜索用户名
      const res=await this.$api.getUserVipList ({
        page:0,
        pagesize:16,
        realname:name
      })
      if(res.data.level=='success'){
        this.vipList=res.data.data.user_vip_list
      }
    },
    getVipNum(item){
      //搜索姓名填充弹出框的信息
      this.member.name=item.realname
      this.member.number=item.vip_card_number;
      this.member.level=item.vip_name;
      this.member.servingTime=item.end_time;//会员到期时间
      this.member.vipId=item.vip_id;
      this.member.uid=item.user_id;
    },
    async getPaymentInsert(){
      //新增缴费记录
      const res=await this.$api.getPaymentInsert({
        paymentChannel:this.member.captureType,
        amountReceivable:this.member.mustMoney,
        amountReceived:this.member.hasMoney,
        remarks:'',//备注
        payType:this.member.payType,
        payMode:this.member.payMode,
        expenseTime:'',//定期缴费时间
        paymentTime:this.member.captureTime,//缴费时间
        vipId:this.member.vipId,
        uid:this.member.uid,
        status:this.member.captureState,
        type:this.member.payItem
      })
      if(res.data.level=='success'){
              this.$message({
                  message: res.data.message,
                  type: 'success'
                  });
                  this.page=1;
                  this.getPaymentList()
              this.dialogVisible=false;
          }else{
              this.$message({
              message: res.data.message,
              type: 'error'
              });
          }
    },
    async getPaymentUpdate(){
      //编辑缴费记录
      const res=await this.$api.getPaymentUpdate({
        paymentChannel:this.member.captureType,
        amountReceivable:this.member.mustMoney,
        amountReceived:this.member.hasMoney,
        remarks:'',//备注
        payType:this.member.payType,
        payMode:this.member.payMode,
        expenseTime:'',//定期缴费时间
        paymentTime:this.member.captureTime,//缴费时间
        vipId:this.member.vipId,
        id:this.member.id,
        status:this.member.captureState,
        type:this.member.payItem
      })
      if(res.data.level=='success'){
              this.$message({
                  message: res.data.message,
                  type: 'success'
                  });
                  this.getPaymentList()
              this.dialogVisible=false;
          }else{
              this.$message({
              message: res.data.message,
              type: 'error'
              });
          }
    },
    editorPayment(id,vipId){
      //弹出编辑窗
      this.editorFlag=true;
      this.getPaymentDetail(id,vipId);
      // //对缴费用户进行编辑
      this.dialogVisible = true
    },
    showPaymentDetail(id,vipId){
      this.detailVisible=true;
      this.getPaymentDetail(id,vipId);
    },
    async getPaymentDetail(id,vipId){
      //查看缴费记录详情
      const res=await this.$api.getPaymentDetail({
        id,vipId
      })
      if(res.data.level=='success'){
        const data=res.data.data.user_payment_info
        this.memberInitData=data;
        this.member.name=data.realname;
        this.member.id=data.id;
        this.member.vipId=data.vip_id;
        this.member.number=data.vip_card_number;
        this.member.level=data.vip_name;
        this.member.captureState=+data.status;
        this.member.servingTime=data.end_time;
        this.member.mustMoney=data.amount_receivable;
        this.member.hasMoney=data.amount_received;
        this.member.captureTime=data.payment_time;//缴费时间
        this.member.captureType=+data.pay_channel;
        this.member.payType=data.pay_type;
        this.member.payMode=+data.pay_mode ||'';
        this.member.payItem=data.type;//缴费项目
        this.member.payItemName=data.type_name;//缴费项目的名字
        if(data.type=='vip'){
          this.payModeFlag=true;
        }else if(data.type=='acitivity'){
          this.payModeFlag=false;
        }
      }

    },
    newPayMent(){
      //新建缴费记录
      this.dialogVisible = true;
      this.editorFlag=false;
      this.payModeFlag=true;
    },
    // payItemChange(e){
    //   //缴费项目变化
    //   if(e=='vip'){
    //     this.payModeFlag=true;
    //   }else if(e=='acitivity'){
    //     this.payModeFlag=false
    //   }
    // },
    initData(){
      this.member.name='';
      this.member.id='';
      this.member.number='';
      this.member.level='';
      this.member.payItem='';
      this.member.payItemName='';//缴费项目名字
      this.member.captureState='';
      this.member.servingTime='';
      this.member.mustMoney='';
      this.member.hasMoney='';
      this.member.captureTime='';//缴费时间
      this.member.captureType='';
      this.member.payType='';
      this.member.payMode=''
      console.log('清除了')
    },
    //关闭导入Excel窗口
    closeExcelDialog() {
      this.importExcelFlag = false;
    },
    //打开导入Excel窗口
    openImportExcel() {
      this.importExcelFlag = true;
    },
    // 文件上传成功时的钩子
    handleSuccess(res, file, fileList) {
      if(res.level == "success"){
        this.importPaymentExcel(res.data.id);
      } else{
        this.$notify.error({
          title: '失败',
          message: `文件上传失败`
        });
      }
    },
    // 文件上传失败时的钩子
    handleError(err, file, fileList) {
      this.$notify.error({
        title: '错误',
        message: `文件上传失败`
      });
    },
    //导入缴费管理Excel
    async importPaymentExcel(id) {
      const res=await this.$api.importExcel({
        excel_id:id,
        type: 'payment'
      })
      if(res.data.level=='success'){
        this.getPaymentList()
        this.$notify.success({
          title: '成功',
          message: `导入成功`
        });
      } else{
        this.$notify.error({
          title: '失败',
          message: `导入失败`
        });
      }
    },
    //删除缴费
    async deletePayment(id) {
      const judge= this.$confirm('删除该缴费记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res=await this.$api.delUserPayment({
          id,
          type:'delete',
        })
        if(res.data.level=='success'){
          this.getPaymentList();
          this.$message({
            type: 'success',
            message: res.data.message
          });
        }else{
          this.$message({
            type: 'error',
            message: res.data.message
          });
        }

      }).catch(() => {

      });
    }
  },
  mounted() {
    this.getPaymentList()
  },
}
</script>
<style lang='scss' scoped>
  .payment{
    .task-form-text{
				color: #666666;
			}
    .action-bar{
			background-color: #f2f2f2;
			height: 60px;
      margin: 10px 0px;
      box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 150px;
				margin-right: 14px;
			}
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
      background: #f2f2f2;
      padding: 8px;
      margin: 10px 0px;
      box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}
  }
</style>

<style>

	.el-pagination.is-background .el-pager li,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .btn-next
	{
		background-color: #fff;
		border: 1px solid #f1f1f1;
		margin: 0;
	}

 .payment .el-dialog__body{overflow: auto;}
</style>
